<template>
  <div class="footer bg-f5">
    <div class="footer-contain">
      <div class="footer-link container clearfix">
        <div class="footer-list">
          <ul>
            <li v-for="item of listData" :key="item.key">
              <div class="title">{{item.title}}</div>
            </li>

          </ul>
        </div>
      </div>
      <div class="footer-copyright">
        <el-row>
          <el-col :span="24">
            <p class="first">© <span class="year">2019</span> {{siteInfo.siteName}} All rights reserved </p>
            <p class="first">{{siteInfo.siteVersionInfo}}</p>
            <P class="color">风险提示：</P>
            <p class="color">{{siteInfo.riskNotice}}</p>
          </el-col>
          <el-col :span="8"></el-col>
          <el-col :span="8">
            <p v-if="siteInfo.sitePhone">
              联系方式 <span class="info" style="color: #6a6c70;">{{siteInfo.sitePhone}}</span>
            </p>
            <p v-if="siteInfo.siteQq">
              QQ号 <span class="info" style="color: #6a6c70;">{{siteInfo.siteQq}}</span>
            </p>
            <p v-if="siteInfo.siteQq">
              邮件 <span class="info" style="color: #6a6c70;">{{siteInfo.siteEmailTo}}</span>
            </p>
          </el-col>
        </el-row>
      </div>
      <el-row class="company-info">
        <span class="foot-item"></span>
        <span class="foot-item"></span>
        <span class="foot-item"></span>
        <span class="foot-item"></span>
        <span class="foot-item"></span>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {
    components: {},
    props: {
      siteInfo: {
        type: Object,
        default () {
          return {
            siteName: '',
            sitePhone: '',
            siteQq: '',
            siteEmailTo: '',
            siteVersionInfo: ''
          }
        }
      }
    },
    data () {
      return {
        listData: []
      }
    },
    watch: {},
    computed: {},
    created () {
    },
    mounted () {
    },
    methods: {}
  }
</script>
<style lang="less" scoped>
  .footer {
    color: #6a6c70;

    .footer-contain {
      width: 1000px;
      margin: 0 auto;
      padding: 20px 0px;
      line-height: 30px;
      border-top: 1px solid #2d2f33;
    }

    .footer-copyright {
      padding-bottom: 20px;

      .info {
        color: #fefefe;
        font-size: 20px;
        margin-left: 10px;
      }

      .first {
        font-size: 12px;
      }

    }

    .company-info {
      padding-top: 20px;
      border-top: 1px solid #2d2f33;
    }

    .foot-item {
      display: inline-block;
      width: 96px;
      height: 48px;
      margin-right: 28px;
      background: url('../assets/image/footer-icons.png') no-repeat 0 0;

      &:nth-child(1) {
        background-position: 0 -110px;
      }

      &:nth-child(2) {
        background-position: 0 -197px;
      }

      &:nth-child(3) {
        width: 107px;
        background-position: -252px -150px;
      }

      &:nth-child(4) {
        width: 107px;
        background-position: -252px -194px;
      }

      &:nth-child(5) {
        width: 42px;
        background-position: -161px -110px;
      }
    }
  }
</style>
